<template>
  <div class="line1">
    <div id="line1" class style="width: 90%;height:450px;"></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/tooltip";
export default {
  mounted() {
    this.myChart = echarts.init(document.getElementById("line1"));
    this.initData();
  },
  props: ["sevenDate", "sevenDay"],
  methods: {
    initData() {
      const colors = ["#5793f3", "#675bba", "#d14a61", "#334455", "#998877"];
      const option = {
        color: colors,
        title: {
          text: "走势图",
          subtext: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "新注册用户",
            "新增订单",
            "新增管理员",
            "新增店铺",
            "新增商品",
          ],
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["bar", "line"] },
            restore: {},
            saveAsImage: {
              show: true,
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.sevenDay,
        },
        yAxis: [
          {
            type: "value",
            name: "数量",
            // min: 0,
            // max: 20,
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "数量",
            // min: 0,
            // max: 20,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "新注册用户",
            type: "line",
            data: this.sevenDate[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增订单",
            type: "line",
            data: this.sevenDate[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增管理员",
            type: "line",
            data: this.sevenDate[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          //
          {
            name: "新增店铺",
            type: "line",
            data: this.sevenDate[3],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          //
          {
            name: "新增商品",
            type: "line",
            data: this.sevenDate[4],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  watch: {
    sevenDate: function () {
      this.initData();
    },
    sevenDay: function () {
      this.initData();
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.line1 {
  display: flex;
  justify-content: center;
}
</style>
